import React, { Component } from 'react';
import '../../src/view/Details.scss'
import { good_details } from '../utils/api'
import { NavBar, Toast, Swiper } from 'antd-mobile'
import '../view/Details.scss'
import { goodcart_goods_add, good_favor, good_unfavor } from '../../src/utils/api.js'
// import { good_unfavor } from '../utils/api'

import store from '../store/index.js'

class Details extends Component {
    constructor(props) {
        super(props);
        this.state = {
            goodInfo: {},
            status: false
        }
    }
    componentDidMount() {
        good_details({ goodid: this.props.location.state.id }).then((res) => {
            if (res.data.status === "no") {
                Toast.show({
                    icon: 'fail',
                    content: res.data.msg,
                    position: 'bottom',
                })
                this.props.history.go(-1);
            } else {
                this.setState({
                    goodInfo: res.data.goodinfo
                })
            }
        });
        store.subscribe(() => {
            this.setState({})
        });
        var isFavor = store.getState().user_favor_list.findIndex((item) => {
            return item.id == this.props.location.state.id
        })
        console.log(isFavor)
        if (isFavor == -1) {
            this.refs.favor.style.color = ""
        }
        else {
            this.setState({
                status: true
            })
            this.refs.favor.style.color = "red"
        }
    }
    back = () => {
        this.props.history.go(-1);
    }
    handelGoodsAdd() {
        var userid = JSON.parse(localStorage.getItem("userInfo")).id
        var goodid = this.state.goodInfo.id;

        console.log("用户id", userid, "商品id", goodid)
        goodcart_goods_add({
            userid, goodid
        }).then((res) => {
            if (res.data.code == 200) {
                Toast.show({
                    icon: 'success',
                    content: '加入购物车成功',
                })
            }
        })
    }
    handelGoodsFavor() {
        var userid = JSON.parse(localStorage.getItem("userInfo")).id
        var goodid = this.state.goodInfo.id;
        if (this.state.status) {
            good_unfavor({ userid, goodid }).then((res) => {
                Toast.show({
                    icon: 'success',
                    content: '已取消收藏',
                })
            })
            this.refs.favor.style.color = ""
            store.dispatch({ type: "STORE_FAVOR_LIST_SUB", payload: this.state.goodInfo })
            this.setState({
                status: false
            })
        } else {
            good_favor({ "goodid": goodid, "userid": userid }).then((res) => {
                if (res.data.code == 200) {
                    Toast.show({
                        icon: 'success',
                        content: '收藏成功',
                    })
                }
                this.setState({
                    status: true
                })
            })
            store.dispatch({ type: "STORE_FAVOR_LIST_ADD", payload: this.state.goodInfo })
            this.refs.favor.style.color = "red"
        }
    }
    onhandlehref() {
        this.props.history.push("/index/shopcarts")
    }
    render() {
        return (
            <div className='datails'>
                <NavBar onBack={this.back}>商品详情</NavBar>
                <div className='info'>
                    <div className='swiper'>
                        <Swiper>
                            {
                                this.state.goodInfo.pics && this.state.goodInfo.pics.map((item, index) => {
                                    return (
                                        <Swiper.Item key={index}>
                                            <img src={item} alt="" />
                                        </Swiper.Item>
                                    )
                                })
                            }
                        </Swiper>



                        <div className="mainInfo">
                            <div className="duration">
                                距结束5天0小时
                            </div>
                            <div className="price">
                                <p>原件&nbsp;<span>￥9999</span></p>
                                <p>活动价￥<span>{this.state.goodInfo.salesPrice && parseInt(this.state.goodInfo.salesPrice.value)}</span></p>
                            </div>
                            <div className="discount">
                                <span>包邮包税</span>
                            </div>
                            <div className="title">
                                {this.state.goodInfo.name && this.state.goodInfo.name}
                            </div>
                            <div className='bottom'>
                                <div>
                                    <span ref="favor" className='iconfont icon' onClick={() => {
                                        this.handelGoodsFavor()
                                    }} >&#xe8c6;</span>
                                    <p>收藏</p>
                                </div>
                                <div>
                                    <span className='iconfont icon'>&#xe624;</span>
                                    <p>分享</p>
                                </div>
                                <div onClick={() => {
                                    this.onhandlehref()
                                }}>
                                    <span className='iconfont icon'>&#xe63f;</span>
                                    <p>购物车</p>
                                </div>
                                <div>
                                    <span onClick={() => {
                                        this.handelGoodsAdd()
                                    }}>加入购物车</span>
                                    <span>立即购买</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div >
        );
    }
}

export default Details;